<template>
  <p-card :bordered="false" class="data-collect-wrap">
    <div class="table-page-search-wrapper">
      <p-row type="flex" :gutter="24">
        <p-col flex="auto">
          <p-form-model layout="inline">
            <p-row :gutter="24">
              <p-col :xl="8" :md="12">
                <p-form-model-item label="条码扫描">
                  <p-input
                    v-model.trim="barCode"
                    placeholder="请扫描"
                    @pressEnter="onEnter"
                  />
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="线体">
                  <p-select
                    v-model="topForm.lineno"
                    @change="changeLine"
                    allowClear
                  >
                    <p-select-option
                      v-for="item in lines"
                      :key="item.codeValue"
                      :value="item.codeValue"
                      >{{ item.textValue }}</p-select-option
                    >
                  </p-select>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="工站">
                  <p-tree-select
                    v-model="topForm.stationCode"
                    :tree-data="stations"
                    :dropdown-style="{ maxHeight: '500px' }"
                    tree-node-filter-prop="title"
                    show-search
                    allow-clear
                    tree-default-expand-all
                    @change="changeHandler"
                  />
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
        </p-col>
        <p-col>
          <slot name="right-button" />
        </p-col>
      </p-row>
    </div>
    <slot name="link">
      <div class="table-operator" style="overflow: hidden">
        <slot name="step" :params="topForm"></slot>
        <p-radio-group
          :value="active"
          button-style="solid"
          class="float-right"
          @change="onLinkChange"
        >
          <p-radio-button
            value="spot-check"
            @click.native.stop="toPath('spot-check')"
            >开线点检</p-radio-button
          >
          <p-radio-button value="sop" @click.native.stop="toPath('sop')"
            >SOP</p-radio-button
          >
          <p-radio-button
            value="first-check"
            @click.native.stop="toPath('first-check')"
            >首检</p-radio-button
          >
          <p-radio-button value="collect">工序采集</p-radio-button>
          <p-radio-button value>生产异常</p-radio-button>
          <p-radio-button value>工序交接</p-radio-button>
          <p-radio-button value>在线送修</p-radio-button>
        </p-radio-group>
      </div>
    </slot>
    <slot :params="topForm" :bar-code="barCode" />
  </p-card>
</template>

<script>
import mixins from "../modules/line-station";

export default {
  mixins: [mixins],
  props: {
    active: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      barCode: "",
    };
  },
  methods: {
    onLinkChange(event) {
      const val = event.target.value;
      switch (val) {
        case "collect":
          this.$emit("update:active", val);
          break;
      }
    },
    toPath(type) {
      this.$router.push(`/work/productionExecution/platform?type=${type}`);
    },
    onEnter() {
      this.$emit("enter", this.barCode);
    },
  },
};
</script>

<style lang="less">
.flex1() {
  flex: 1;
}

.flex-column() {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.data-collect {
  &-wrap {
    height: 100%;

    .poros-card-body {
      .flex-column();
      overflow: hidden;
    }

    .flex1 {
      .flex1();
      overflow: auto;
    }
  }

  &-content {
    display: flex;
    min-height: 0;
    .flex1();

    &__left,
    &__right {
      .flex-column();
    }

    &__left {
      width: 425px;
      margin-right: 25px;
    }

    &__right {
      .flex1();
    }
  }
}
</style>